<template>
  <div :style="{ width: '100%' }">
    <div :style="{ marginLeft: '1.76%', marginTop: (32 / 96) + 'rem', marginBottom: (32 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
      <span :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">账号安全</span>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginBottom: (38 / 96) + 'rem' }">
      <div :style="{ width: '97.68%', height: (1 / 96) + 'rem', background: '#EEEEEE', }"></div>
    </div>
    <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (53 / 96) + 'rem' }">
      <div :style="{ marginLeft: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">用户名</span>
      </div>
      <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', opacity: 0.9, marginLeft: (67 / 96) + 'rem' }">{{ userName }}</span>
    </div>
    <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (53 / 96) + 'rem' }">
      <div :style="{ marginLeft: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">手机号</span>
      </div>
      <div v-if="telphoneType" :style="{ width: '27.9%', marginLeft: (67 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', opacity: 0.9 }">已绑定号码：{{ telphone }}</span>
      </div>
      <div v-if="telphoneType" :style="{ width: (183 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }">
        <div @click="changeClick(1)" :style="{ width: (69 / 96) + 'rem', height: (30 / 96) + 'rem', border: (1 / 96) + 'rem solid #CCCCCC', borderRadius: (15 / 96) + 'rem', marginRight: (15 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
          <span :style="{ fontSize: (20 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">解绑</span>
        </div>
        <div @click="changeClick(1)" :style="{ width: (69 / 96) + 'rem', height: (30 / 96) + 'rem', background: '#6168FE', borderRadius: (15 / 96) + 'rem', marginRight: (15 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
          <span :style="{ fontSize: (20 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#FFFFFF', lineHeight: (24 / 96) + 'rem' }">更换</span>
        </div>
      </div>
      <div v-if="!telphoneType" :style="{ width: '27.9%', marginLeft: (67 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', opacity: 0.9 }">未绑定手机号，绑定后可使用该手机号直接登录</span>
      </div>
      <div v-if="!telphoneType" :style="{ width: (183 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }">
        <div @click="changeClick(1)" :style="{ width: (69 / 96) + 'rem', height: (30 / 96) + 'rem', background: '#6168FE', borderRadius: (15 / 96) + 'rem', marginRight: (15 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
          <span :style="{ fontSize: (20 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#FFFFFF', lineHeight: (24 / 96) + 'rem' }">绑定</span>
        </div>
      </div>
    </div>
    <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (53 / 96) + 'rem' }">
      <div :style="{ marginLeft: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">邮箱账号</span>
      </div>
      <div v-if="emailType" :style="{ width: '27.9%', marginLeft: (43 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', opacity: 0.9 }">已绑定邮箱：{{ email }}</span>
      </div>
      <div v-if="emailType" :style="{ width: (183 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }">
        <div @click="changeClick(2)" :style="{ width: (69 / 96) + 'rem', height: (30 / 96) + 'rem', border: (1 / 96) + 'rem solid #CCCCCC', borderRadius: (15 / 96) + 'rem', marginRight: (15 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
          <span :style="{ fontSize: (20 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">解绑</span>
        </div>
        <div @click="changeClick(2)" :style="{ width: (69 / 96) + 'rem', height: (30 / 96) + 'rem', background: '#6168FE', borderRadius: (15 / 96) + 'rem', marginRight: (15 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
          <span :style="{ fontSize: (20 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#FFFFFF', lineHeight: (24 / 96) + 'rem' }">更换</span>
        </div>
      </div>
      <div v-if="!emailType" :style="{ width: '27.9%', marginLeft: (43 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', opacity: 0.9 }">未绑定邮箱，绑定后可使用该邮箱直接登录</span>
      </div>
      <div v-if="!emailType" :style="{ width: (183 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }">
        <div @click="changeClick(2)" :style="{ width: (69 / 96) + 'rem', height: (30 / 96) + 'rem', background: '#6168FE', borderRadius: (15 / 96) + 'rem', marginRight: (15 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
          <span :style="{ fontSize: (20 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#FFFFFF', lineHeight: (24 / 96) + 'rem' }">绑定</span>
        </div>
      </div>
    </div>
    <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (53 / 96) + 'rem' }">
      <div :style="{ marginLeft: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">登录密码</span>
      </div>
      <div :style="{ width: '27.9%', marginLeft: (41 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', opacity: 0.9 }">******</span>
      </div>
      <div :style="{ width: (183 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }">
        <div @click="changeClick(3)" :style="{ width: (69 / 96) + 'rem', height: (30 / 96) + 'rem', background: '#6168FE', borderRadius: (15 / 96) + 'rem', marginRight: (15 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
          <span :style="{ fontSize: (20 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#FFFFFF', lineHeight: (24 / 96) + 'rem' }">修改</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {pageResize} from '../../utils/resetScreenSize.js'
  export default {
    name: 'AccountSecurityPage',
    components: {},
    data() {
      return {
        personalImage: "http://bggkpsh.oss-cn-beijing.aliyuncs.com/uploadFile4a4b73df-bd49-4fb1-9906-d4b2f54545de.png",
        userName: "啵啵",
        telphone: "18315460138",
        email: "1234567899@qq.com",
        telphoneType: true,
        emailType: false,
        showType: 0
      }
    },
    mounted() {
      pageResize();
    },
    methods: {
      changeClick(index) {
        if(index == 1) {
          this.$router.push({name: 'UnbindPhone', params: {}});
          window.document.title = '手机解绑';
        }
        if(index == 2) {
          this.$router.push({name: 'BindEmail', params: {}});
          window.document.title = '邮箱绑定';
        }
        if(index == 3) {
          this.$router.push({name: 'ChangePassword', params: {}});
          window.document.title = '修改密码';
        }
        // this.$emit("changeClick", index)
      }
    },
    activated() {
      window.document.title = '账号安全';
      let getUserInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.userName = getUserInfo.nickname;
      this.personalImage = getUserInfo.face ? getUserInfo.face : "../../static/user_head_default.png";
      this.telphone = getUserInfo.mobile;
    }
  }
</script>

<style scoped>
  :-moz-placeholder {
    fontFamily: FZKai-Z03S;
    fontWeight: 400;
    color: #333333;
    opacity: 1;
  }

  ::-moz-placeholder {
    fontFamily: FZKai-Z03S;
    fontWeight: 400;
    color: #333333;
    opacity: 1;
  }

  input:-ms-input-placeholder {
    fontFamily: FZKai-Z03S;
    fontWeight: 400;
    color: #333333;
    opacity: 1;
  }

  input::-webkit-input-placeholder {
    fontFamily: FZKai-Z03S;
    fontWeight: 400;
    color: #333333;
    opacity: 1;
  }
</style>
